<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<!DOCTYPE html>
<html>
	<head>
		<title>我的购物车</title>
		<%@include file="/common/header.jsp" %>
		<link rel="stylesheet" href="${basePath }css/mycar.css" />
				
	</head>
	<body>
		<%@include file="/common/top.jsp" %>
				
		<div class="container">
		<s:if test=" #session.Car !=null">
		 
		   <div class="_cart">
		     <div class="_cart_title">
		        <h2>我的购物车</h2>
		     </div>
		     <!-- Modal start-->
			 <div class="modal fade" id="myModal" tabindex="-1">
		       <div class="modal-dialog">
		         <div class="modal-content">
		           <div class="modal-header">
		             <button type="button" class="close" data-dismiss="modal">×</button>
		             <h2 class="modal-title" id="myModalLabel">警告信息</h2>
		          </div>
		        <div class="modal-body">
		          <h2 class="modal-body" id="myModalLabel">确认要删除吗？</h2>
		        </div>
		        <div class="modal-footer">
		         <a href="javascript:dodelete()" class="btn btn-success">确定</a>
		         <button id="cencel" type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
		        </div>
		      </div>
		    </div>
		   </div>
		   <!-- Modal end-->	
		     <div class="_cart_table">
		      
			       <table class="table table-bordered">
			          <tr class="warning">
			            <td></td>
			            <td width="15%">商品图片</td>
			            <td width="50%">商品名称</td>
			            <td width="10%">单价</td>
			            <td width="10%">购买数量</td>
			            <td width="10%">小计</td>
			            <td width="5%">删除</td>
			          </tr>
			          <s:iterator value="#session.Car.items" status="st">
			      	    <tr id="<s:property value="id"/>_caritem">
			          		<td style="vertical-align: middle;"><s:property value="#st.index"/></td>
				            <td style="vertical-align: middle;"><img src="${basePath }img/goods/<s:property value="good.img"/>" class="img-thumbnail" width="80" height="80" border="1"></td>
				            <td style="vertical-align: middle;"><s:property value="good.name"/></td>
				            <td style="vertical-align: middle;"><s:property value="good.price"/></td>
				            <td style="vertical-align: middle;">&nbsp;<s:property value="quantity"/>&nbsp;
				            <td style="vertical-align: middle;"><s:property value="price"/></td>
				            <td style="vertical-align: middle;"><button data-toggle="modal" data-target="#myModal" class="btn btn-mini btn-danger" type="button" onclick="dodeletecar('<s:property value="id"/>')">删除</button></td> 
				        </tr>
			          </s:iterator>
			          <tr>
			            <td colspan="7" style="text-align:right;">总金额：<span id="sumprice">${sessionScope.Car.sumprice }</span>￥</td>
			          </tr>
			       </table>
		     
		     </div>
		   </div>
		   <form id="orderForm" action="order_addOrder.action" method="POST" >
		 	<div class="_order_userinfo">
		       <table class="table table-condensed">
		          <tr>
		            <td style="vertical-align: middle;text-align:center;">用户：</td>
		            <td style="vertical-align: middle;text-align:left;">${sessionScope.USER_INFO.account }</td>
		          </tr>
		          <tr>
		            <td style="vertical-align: middle;text-align:center;">收件人：</td>
		            <td style="vertical-align: middle;text-align:left"><s:textfield name="order.consignee" id="_consignee" cssClass="form-control" placeholder="请输入收件人名字"/></td>
		          </tr>
		          <tr>
		            <td style="vertical-align: middle;text-align:center;">收货地址：</td>
		            <td style="vertical-align: middle;text-align:left"><s:textfield name="order.address" id="_address" cssClass="form-control" placeholder="请输入收件地址"/></td>
		          </tr>
		          <tr>
		            <td style="vertical-align: middle;text-align:center;">手机：</td>
		            <td style="vertical-align: middle;text-align:left"><s:textfield name="order.phone" id="_phone" cssClass="form-control" placeholder="请输入联系电话"/></td>
		          </tr>
		          <tr>
		            <td style="vertical-align: middle;text-align:center;">备注：</td>
		            <td style="vertical-align: middle;text-align:left"><s:textfield name="order.readme" id="_readme" cssClass="form-control" placeholder="如有需求告知商家,这里输入备注"/></td>
		          </tr>
		          <tr>
		          	<td></td>
			        <td><input class="btn btn-lg btn-warning"  style="background-color:#BB0000;margin-left: 40px;" type="button" value="支付金额,提交订单" onclick="onSubmit()"/>
			        </td>
			      </tr>
		       </table>
		     </div>
	   	  </form>
	   	  <s:hidden id="deleteCarId"></s:hidden>
	   	  </s:if>
	   	  <s:else>
	   	  	<div style="height:500px;text-align:center;">
	   	 	 	<h1>您的购物车为空</h1>
	   	  	</div>
	   	  </s:else>
	   	</div> <!-- /container -->
	   	
		<%@include file="/common/footer.jsp" %>
		
		<script>
			function dodeletecar(id){
				$('#deleteCarId').val(id);
			}
			
			function dodelete(){
				var deleteId = $('#deleteCarId').val();
				if(deleteId != ''){
					
					$.ajax({
						url:"${basePath}order_deleteCarItem.action",
						data:{"deleteId":deleteId},
						type:"post",
						dataType:"json",
						success:function(data){
							var deletetr = $('#'+deleteId+'_caritem');
							deletetr.remove();
							$('#cencel').click();
							$('#sumprice').text(data.sumPrice);
							//$('#carNumber').text('购物车'+data.carNumber+'件');
							
						},
						error: function(){alert("false");}
						
					});
					
				}
			}

			//提交表单
			function onSubmit(){
				//先校验
				var consignee = $('#_consignee').val();
				if(consignee == ''){
					alert('收件人不能为空!');
					$('#_consignee').focus();
					return false;
				}
				
				var address = $('#_address').val();
				if(address == ''){
					alert('收件地址不能为空!');
					$('#_address').focus();
					return false;
				}
				
				var phoneinfo = $('#_phone').val();		
				var reg=/^[0-9]{5,11}$/i;
				if (phoneinfo.match(reg)==null) {
			        alert("请输入有效的手机");
			        $('#_phone').focus();	
			        return false;
			    }

			    var sumprice = $('#sumprice').text();
				if(sumprice < 1){
					alert('没有商品,生成订单失败!');
					return false;
				}
							    
				//提交表单
				$("#orderForm").submit();
			}
			
		</script>
	</body>
</html>
